<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	xmlns:o="http://omnifaces.org/ui"
	  xmlns:composition="http://java.sun.com/jsf/composite"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<composition:interface></composition:interface>
<composition:implementation>
<h:form  id="editmsgs" name="editmsgs" method="post" enctype="application/x-www-form-urlencoded" styleClass="form-horizontal">
	<div id="panelbox container-fluid" >
		<div id="panelheader" class="navbar">
			<div class="navbar-inner">
				<ul class="nav">
					<li>
					<h:selectOneMenu value="#{i18NMsg.selectedColumn}" id="columns">
						<f:selectItems value="#{i18NMsg.columns}"></f:selectItems>
						<f:ajax render="msgs messages" listener="#{i18NMsg.switchColumn}"></f:ajax>
					</h:selectOneMenu>
					</li>
					<li>
					<h:commandButton value="Translate" styleClass="btn btn-primary">
						<f:ajax render="msgs messages" listener="#{i18NMsg.translate}"></f:ajax>
					</h:commandButton>
					</li>
				</ul>
				<ul class="nav pull-right">
					<li>
					<i class="icon icon-plus">
					</i>
					<h:selectOneMenu value="#{i18NMsg.newColumn}" id="newcolumn">
						<f:ajax execute="@this" render="@this columns messages" listener="#{i18NMsg.addColumn}" ></f:ajax>
						<f:selectItems value="#{i18NMsg.availableLangs}"></f:selectItems>
					</h:selectOneMenu>
					</li>	
				</ul>
			</div>
		</div>
						
		<div id="panelbody" class="span12">
			<h:messages  errorClass="text-error" globalOnly="true" id="messages"></h:messages>
						
			<script type="text/javascript" >
			
						function saveMsg(element, event)
						{
							event.preventDefault();
							var key=$(element).closest("tr").find("td:nth-child(2)").text();
							var value=$(element).closest("tr").find("td:last-child input[type=text]:first-child").val();
							editKey({key:key, value:value});
						}
						
			
			</script>	
			<o:commandScript name="editKey" render="messages" actionListener="#{i18NMsg.editKey}"></o:commandScript>
			<h:panelGroup layout="block" id="msgs">
				<table>
					<thead>
						<tr>
							<th></th>
							<th><h:outputText value="Text"></h:outputText></th>
							<th><h:outputText value="Translation"></h:outputText></th>
						</tr>
						<tr>
							<th>
								<h:commandLink styleClass="btn" id="addKey">
									<f:ajax execute="newkey" render="msgs newkey" listener="#{i18NMsg.addNewKey}"></f:ajax>
									<i class="icon icon-plus"></i>
								</h:commandLink>
							
							</th>
							<th>
								<h:inputText id="newkey" value="#{i18NMsg.newKey}"></h:inputText>
							</th>
							<th>
							</th>
						</tr>
					</thead>
					<tbody>
						<ui:repeat var="onemsg" value="#{i18NMsg.msgsEntries}">
							<tr>
								<td>
									<h:commandLink styleClass="btn" id="deleteKey" actionListener="#{i18NMsg.deleteKey(onemsg.key)}">
										<f:ajax execute="@this" render=":#{cc.clientId}:editmsgs:msgs :#{cc.clientId}:editmsgs:messages" ></f:ajax>
										<i class="icon icon-remove"></i>
									</h:commandLink>
								</td>
							<td style="width:300px;"><h:outputText value="#{onemsg.key}"></h:outputText></td>
							<td><input type="text" value="#{onemsg.value}" ></input>
								<button type="button" onclick="saveMsg(this, event);">
									<i class="icon icon-save"></i>
								</button>
							</td>
							
							</tr>
						
						</ui:repeat>
					
					
					</tbody>
				
				
				</table>
			
			</h:panelGroup>
		</div>
	</div>
</h:form>
</composition:implementation>
</html>

